@mixin table-size($padding, $border-radius) {
  table {
    th,
    td {
      padding: $padding;
    }
  }

  &.ui-table-radius {
    table {
      border-radius: $border-radius;
    }
  }
}

.ui-table {
  @include table-size(12px, $base-radius);
  color: #666;

  .ui-table-body {
    transition: opacity .3s ease;
  }

  table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;

    tr {
      line-height: normal;
    }

    th,
    td {
      border-bottom: 1px solid #e9e9e9;
    }

    th {
      background: #fffbe9;
      font-weight: bold;
      transition: background .3s ease;
      position: relative;
      user-select: none;
    }

    tbody:last-child {
      tr:last-child {
        td {
          border-bottom: 0;
        }
      }
    }
    &.ui-table-multi-headrow {
      border: 1px solid #e9e9e9;
      border-right: 0;
      text-align: center;

      th,
      td {
        border-right: 1px solid #e9e9e9;
      }
    }
  }

  &.ui-table-bordered {
    table {
      border: 1px solid #e9e9e9;
      border-right: 0;

      th,
      td {
        border-right: 1px solid #e9e9e9;
      }
    }
  }

  &.ui-table-striped {
    tbody {
      > tr:nth-of-type(even) {
        background: #fbfbfb;
      }
    }
  }

  &.ui-table-hover {
    tbody {
      tr:hover {
        background-color: #f5f5f5;
      }
    }
  }

  &.size-xl {
    @include table-size(16px, $base-radius-xl);
  }
  &.size-lg {
    @include table-size(14px, $base-radius-lg);
  }
  &.size-sm {
    @include table-size(6px 12px, $base-radius-sm);
  }
  &.size-xs {
    @include table-size(4px 12px, $base-radius-xs);
  }
}

.ui-table-sorter {
  margin-left: 5px;
  display: inline-block;
  width: 8px;
  height: 16px;
  vertical-align: middle;
  text-align: center;

  .ui-table-sorter-up,
  .ui-table-sorter-down {
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-style: solid;
  }

  .ui-table-sorter-up {
    border-width: 0 4px 7px;
    border-color: transparent transparent #ddd;
    margin-bottom: 2px;

    &.ui-table-sorter-active {
      border-color: transparent transparent #2db7f5;
    }
  }

  .ui-table-sorter-down {
    border-width: 7px 4px 0;
    border-color: #ddd transparent transparent;

    &.ui-table-sorter-active {
      border-color: #2db7f5 transparent transparent;
    }
  }
}
